<template>
  <el-container class="app-container">
    <zl-table ref="table" url="/sys/user/onlineList" :param.sync="par">
      <template slot="search">
        <el-form :inline="true" :model="par" class="left">
          <el-form-item label="登录地址" prop="ip">
            <el-input v-model="par.ip" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item label="用户名" prop="userName">
            <el-input v-model="par.userName" clearable placeholder="请输入" />
          </el-form-item>
          <el-form-item>
            <el-button icon="el-icon-search" type="primary" size="small" @click="query">搜 索</el-button>
          </el-form-item>
        </el-form>
      </template>
      <template slot="cols">
        <el-table-column align="center" width="50px" type="index" :index="indexMethod" />
        <el-table-column label="用户名" align="center" prop="realName" :show-overflow-tooltip="true" />
        <el-table-column label="登录名" align="center" prop="userName" :show-overflow-tooltip="true" />
        <el-table-column label="登录地点" align="center" prop="location" :show-overflow-tooltip="true" />
        <el-table-column label="主机" align="center" prop="ip" :show-overflow-tooltip="true" />
        <el-table-column label="浏览器" align="center" prop="browser" />
        <el-table-column label="操作系统" align="center" prop="os" />
        <el-table-column label="登录时间" align="center" prop="activeTime" width="180" />
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              title="注销"
              type="danger"
              circle
              plain
              class="iconfont icon-tuichu"
              size="mini"
              @click.native.prevent="handleForceLogout(scope.row)"
            />
          </template>
        </el-table-column>
      </template>
    </zl-table>
  </el-container>
</template>

<script>
import ZlTable from '@/components/table/table-con'
import { logoutUser } from '@/api/user'

export default {
  name: 'OnlineUser',
  components: { ZlTable },
  data() {
    return {
      // 遮罩层
      loading: true,
      par: {
        ip: null,
        userName: null
      }
    }
  },
  created() {

  },
  methods: {
    /** 强退按钮操作 */
    handleForceLogout(row) {
      this.$confirm('是否要注销【' + row.realName + '】用户？').then(function() {
        return logoutUser(row.key)
      }).then(() => {
        this.query()
        this.$message.success('注销成功')
      }).catch(() => {})
    },
    query() {
      this.$refs.table.query()
    },
    indexMethod(index) {
      return (this.$refs.table.pageNum - 1) * this.$refs.table.pageSize + index + 1
    }
  }
}
</script>

